{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">

{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .top_tag {
            border-bottom: #01AAED solid 3px;color: #01AAED;
        }
        .tab_top {
            width: 100px;height: 40px;line-height: 40px;text-align: center;display: inline-block;cursor: pointer;
        }
        .add-backbround-color {
            border-left: #1E90FF solid 3px;color: #1E90FF;
        }
        .span-class {
            border-radius: 3px;font-size: 10px;float: right;background: #8c939d;width: 25px;height: 20px;margin-top: 7px;line-height: 20px;text-align: center;display: table-row;color: white;
        }
        .shade {
            position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        #addForm5 {
            width: 400px;height: 250px;background: #F5F5F5;position: absolute;border: #dfdfdf solid 1px;margin: auto;border-radius: 3px;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10100;font-size: 0;
        }
        #title4 {
            display: flex;justify-content: space-between;text-align: right;box-sizing: border-box;padding: 0 10px;height: 40px;color: #0b0b0b;cursor: move;width: 100%;background: #f4f7fa;border-top-left-radius: 3px;border-top-right-radius: 3px;
        }
        .button_style {
            width: 70px;border: #cfcfcf solid 0.5px;background: #cfcfcf;border-radius: 3px;margin-left: 10px;display: inline-block;vertical-align: top;
        }
        .button_style_active {
            width: 70px;border-radius: 3px;margin-left: 10px;display: inline-block;vertical-align: top;border: #00a0e9 solid 0.5px;background: #00a0e9;color: white;
        }
        .table_wrap {
            width: 100%;height: 95.2%;overflow: auto;border: #cecece solid 1px;border-left: none;
        }
         table {
            table-layout: fixed;width: 100%;border-collapse: collapse;
        }
        td {
            height: 35px;border: #cecece solid 1px;font-size: 12px;
        }
        thead tr th {
            position: sticky;top: 0;background: #EEEEEE;text-align: center;height: 35px;line-height: 35px;border-right: #cecece solid 1px;border-left: #cecece solid 1px;font-size: 12px;font-weight: normal;
        }
        th:last-child,
        td:last-child {
            position: sticky;text-align: center;right: 0;width: 100px;background: white;box-shadow: -5px 0 5px #b81900;
        }
        tbody tr:nth-child(odd) {
            background: #F7F7F7;
        }
        tbody tr:hover {
            background: #EFFBFE;
        }
        th:last-child {
            z-index: 3;background: #F4F4F5;
        }
        ::-webkit-scrollbar {
            height: 8px;
        }
        ::-webkit-scrollbar-thumb {
            background: #cfcfcf;
        }
        .shadow-right th:last-child::after,
        .shadow-right td:last-child::after {
            content: "";position: absolute;top: 0;width: 10px;height: 100%;left: -10px;background: linear-gradient(to left, #cfcfcf, transparent);
        }
        .text-version {
            width: 100%;text-align: center;padding-left: 3px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
        #page-footer {
            float: right;height: 40px;padding-top: 5px;text-align: right;padding-right: 2%;
        }
        .regular {
            display: inline-block;vertical-align: top;width: 60px;border-radius: 3px;background: white;border: #cfcfcf solid 1px;height: 30px;line-height: 29px;text-align: center;cursor: pointer;
        }
        .page-list div:hover {
            background: #cfcfcf;color: #0b0b0b;
        }
        .footer-active {
            width: 30px;height: 30px;line-height: 29px;border: #1890ff solid 1px;text-align: center;border-radius: 3px;cursor: pointer;display: inline-block;vertical-align: top;background: #1890ff;color: white;
        }
        .footer {
            width: 30px;height: 30px;line-height: 29px;border: #cfcfcf solid 1px;text-align: center;border-radius: 3px;cursor: pointer;background: white;display: inline-block;vertical-align: top;
        }
        .regular:hover {
            background: #cfcfcf;
        }
        .shade1 {
            position: fixed;top: 45px;left: 14%;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;
        }
        .file {
            position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;
        }
        .file input {
            position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;
        }
        .file:hover {
            background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div id="new_models1" class="shade">
        <div id="new_models" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 500px;height: 200px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="box"
                     style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;line-height: 50px;border-bottom: #dfdfdf solid 1px;">
                    <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 0px;">
                        <h5 id="modal-title" class="modal-title" style="color: #727E8C;">
                            添加备注
                        </h5>
                    </div>
                    <span onclick="close_models()" style="float: right;padding-right: 2%;cursor: pointer;">
                        <i class="iconfont icon-quchu"></i>
                    </span>
                </div>
                <div style="height: 120px;width: 100%;border-bottom: #dfdfdf solid 1px;">
                    <textarea name="" id="remarks" cols="30" rows="10"
                              style="width: 96%;height: 100px;margin-left: 2%;border: #cfcfcf solid 1px;outline: none;"></textarea>
                </div>
                <div style="width: 100%;height: 40px;text-align: right;padding-right: 2%;">
                    <button id="summit_but"
                            style="width: 70px;height: 30px;border: #dfdfdf solid 1px;margin-top: 5px;border-radius: 3px;background: #1E90FF;color: white;">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
    {#    顶部导航    #}
    <div class="headline">

        <div id="my_application_tab" onclick="change_mind('my_application')" class="{% if types == '我的待办' %}tab_top top_tag{% else %}tab_top{% endif %}">
            我的待办
        </div>
        <div id="new_issues_tab" onclick="change_mind('new_issues')" class="{% if types == '我的已办' %}tab_top top_tag{% else %}tab_top{% endif %} ">
            我的已办
        </div>
        <div id="my_dfet_tab" onclick="change_mind('my_dfet')" class="{% if types == '我的申请' %}tab_top top_tag{% else %}tab_top{% endif %} ">
            我的申请
        </div>
        <div id="my_dfet_tab" onclick="change_mind('my_shelve')" class="{% if types == '我的搁置' %}tab_top top_tag{% else %}tab_top{% endif %} ">
            我的搁置
        </div>

        <div class="sa-ele" style="width: 70%;text-align: right;font-size: 0;float: right;padding-top: 5px;padding-right: 10px;">
        {{ folw }}
            {% if types == '我的已办' and folw == '上级来文' %}
                <div style="height: 30px;vertical-align: top;margin-right: 15px;font-size: 14px;display: inline-block;" id="flow_status_choose">
                    <button class="{% if flow_name == '1' %}button_style button_style_active{% else %}button_style{% endif %}" name="button_style" onclick="ChooseFlow('1')">审核中</button>
                    <button class="{% if flow_name == '2' %}button_style button_style_active{% else %}button_style{% endif %}" name="button_style" onclick="ChooseFlow('2')">传阅中</button>
                    <button class="{% if flow_name == '4' %}button_style button_style_active{% else %}button_style{% endif %}" name="button_style" onclick="ChooseFlow('4')">完结</button>
                    <button class="{% if flow_name == '3' %}button_style button_style_active{% else %}button_style{% endif %}" name="button_style" onclick="ChooseFlow('3')">拒绝</button>
                </div>
            {% endif %}

            <input type="text" id="search_val" style="width: 30%;display: inline-block;border-bottom-left-radius: 3px;border-top-left-radius: 3px;height: 30px;border: #0d8ddb solid 1px;vertical-align: top;font-size: 14px;padding-left: 2px;" placeholder="请输入搜索关键词" value="{{ wd }}">
            <button onclick="search_key()" class="search-action" style="width: 100px;height: 30px;border-bottom-right-radius: 3px;border-top-right-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-left: -5px;">
                搜索
            </button>
        </div>
    </div>

    <div id="my_application" style="width: 100%;height: 95.4%;background-color: white;">
        <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;background: #F5F5F5;">
            <div id="left_nav" style="width: 20%;height: 100%;display: inline-block;vertical-align: top;background: white;overflow: auto;">
                {% for lst, val in return_list.items %}
                    {% if val.flag == 1 or folw_type == lst %}
                        <div style="width: 95%; height: 35px; line-height: 35px; cursor: pointer; border-bottom: 1px solid rgb(207, 207, 207);">
                            <div onclick="left_click_search('{{ lst }}')" data-value="{{ lst }}" class="onclick-search add-backbround-color" style="padding-left: 5px;">
                                {{ lst }}<span class="span-class">{% if val.count > 99 %}99+{% else %}{{ val.count }}{% endif %}</span>
                            </div>
                        </div>
                    {% else %}
                        <div style="width: 95%; height: 35px; line-height: 35px; cursor: pointer; border-bottom: 1px solid rgb(207, 207, 207);">
                            <div onclick="left_click_search('{{ lst }}')" data-value="{{ lst }}" class="onclick-search" style="padding-left: 5px;">
                                {{ lst }}
                                {% if val.count == 0 or types == '我的已办' or types == '我的申请' %}
                                    <span class="span-class">{% if val.count > 99 %}99+{% else %}{{ val.count }}{% endif %}</span>
                                {% else %}
                                    <span class="span-class" style="background: red;color: white;">{% if val.count > 99 %}99+{% else %}{{ val.count }}{% endif %}</span>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}

                    <div id="{{ lst }}" class="LeftNavigation" style="width: 100%;cursor: pointer;{% if folw_type != lst %}display: none{% endif %};">
                        {% for datum in val.data %}
                            <div data-value="{{ datum.type }}" onclick="change_font_color('{{ datum.type }}')" class="div_tag2" style="width: 95%; padding-left: 35px; height: 35px; border-bottom: 1px solid rgb(207, 207, 207); line-height: 35px;{% if folw == datum.type %}color: rgb(30, 144, 255);{% endif %}">
                                {{ datum.type }}
                                {% if datum.number == 0 or types == '我的已办' or types == '我的申请' %}
                                    <span class="span-class">{% if datum.number > 99 %}99+{% else %}{{ datum.number }}{% endif %}</span>
                                {% else %}
                                    <span class="span-class" style="background: red;color: white;">{% if datum.number > 99 %}99+{% else %}{{ datum.number }}{% endif %}</span>
                                {% endif %}

                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
            <div style="width: 79.5%;height: 100%;display: inline-block;vertical-align: top;background: white;">
                <div class="table_wrap">
                    <table id="table" style="{% if not data|length %}height: 100%;{% endif %}">
                        <thead>
                            <tr id="thead-title">
                                <th style="width: 50px;background: #EEEEEE;">序号</th>
                                <th style="width: 150px;">流程类型</th>
                                <th style="width: 300px;">标题</th>
                                <th style="width: 100px;">创建人</th>
                                <th style="width: 200px;">部门</th>
                                <th style="width: 200px;">{% if types == '我的已办' %}审批时间{% else %}创建时间{% endif %}</th>
                                <th style="width: 100px;">节点</th>
                                <th style="width: 100px;">当前审核人</th>
                                <th style="width: 100px;background: #EEEEEE;border-right: none;">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if data|length %}
                                {% for datum in data %}
                                    <tr>
                                        <td title="{{ datum.Serial }}"><div class="text-version">{{ datum.Serial }}</div></td>
                                        <td title="{{ datum.types }}"><div class="text-version">{{ datum.types }}</div></td>
                                        <td title="{{ datum.title }}"><div class="text-version">{% autoescape off %} {{ datum.title }} {% endautoescape %}</div></td>
                                        <td title="{{ datum.create_by }}"><div class="text-version">{{ datum.create_by }}</div></td>
                                        <td title="{{ datum.department }}"><div class="text-version">{{ datum.department }}</div></td>
                                        <td title="{{ datum.create_time }}"><div class="text-version">{{ datum.create_time }}</div></td>
                                        <td title="{{ datum.node }}"><div class="text-version">{{ datum.node }}</div></td>
                                        <td title="{{ datum.reviewer }}">
                                            <div class="text-version">{% autoescape off %} {{ datum.approved }} {% endautoescape %}</div>
                                        </td>
                                        <td style="border-right: none;"><div class="text-version"><a href="{{ datum.url }}" onclick="{{ datum.admin_add }}">{% autoescape off %} {{ datum.text }} {% endautoescape %}</a></div></td>
                                    </tr>
                                {% endfor %}
                            {% else %}
                                <tr style="width: 100%;height: 100%;">
                                    <td colspan="9" style="width: 100%;height: 100%;text-align: center;line-height: 100%;">
                                        暂无数据
                                    </td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>

{#                <-- 分页 -->#}
                <div style="width: 100%;height: 40px;background: #EEEEEE;border: #cfcfcf solid 1px;border-top: none;border-left: none;">
                    <div style="float: left;height: 40px;padding-top: 5px;width: 40%;">
                        <div style="display: inline-block;vertical-align: top;height: 30px;line-height: 30px;padding-left: 3%;font-size: 12px;">
                            跳转至 <input type="text" style="width: 50px;height: 25px;background: white;border: #cfcfcf solid 1px;text-align: center;" value="1" onchange="change_page_size(this.value)"> 页
                        </div>
                        <div style="margin-left: 5px;display: inline-block;vertical-align: top;height: 30px;line-height: 30px;font-size: 12px;">
                            <select name="" id="page-size" onchange="change_page_size()" style="width: 60px;background: white;border: #cfcfcf solid 1px;text-align: center;height: 25px;outline: none;">
                                <option value="20" {% if page_size == 20 %}selected{% endif %}>20</option>
                                <option value="30" {% if page_size == 30 %}selected{% endif %}>30</option>
                                <option value="50" {% if page_size == 50 %}selected{% endif %}>50</option>
                                <option value="100" {% if page_size == 100 %}selected{% endif %}>100</option>
                                <option value="500" {% if page_size == 500 %}selected{% endif %}>500</option>
                                <option value="1000" {% if page_size == 1000 %}selected{% endif %}>1000</option>
                                <option value="5000" {% if page_size == 5000 %}selected{% endif %}>5000</option>
                                <option value="10000" {% if page_size == 10000 %}selected{% endif %}>10000</option>
                            </select>
                        </div>
                        <div style="display: inline-block;vertical-align: top;height: 30px;line-height: 30px;padding-left: 3%;font-size: 12px;">
                            此页显示 {{ views_range_start }}-{{ views_range_end }} 共{{ totals }}条
                        </div>
                    </div>
                    <div id="page-footer">
                        <div style="display: inline-block;vertical-align: top;text-align: right;">
                            {% if pages > 1 %}
                                <div class="regular" onclick="change_page_size(1)">首页</div>
                                <div class="regular" onclick="change_page_size({{ pages }} - 1)">上一页</div>
                            {% else %}
                                <div class="regular" style="cursor: no-drop;">首页</div>
                                <div class="regular" style="cursor: no-drop;">上一页</div>
                            {% endif %}
                        </div>

                        <div class="page-list" style="display: inline-block;vertical-align: top;">
                            {% for page in page_list %}
                                {% if pages == page %}
                                    <div onclick="change_page_size({{ page }})" class="footer-active">{{ page }}</div>
                                {% else %}
                                    <div onclick="change_page_size({{ page }})" class="footer">{{ page }}</div>
                                {% endif %}
                            {% endfor %}
                        </div>

                        <div style="display: inline-block;vertical-align: top;text-align: right;">
                            {% if page_all_number > pages %}
                                <div class="regular" onclick="change_page_size({{ pages }} + 1)">下一页</div>
                                <div class="regular" onclick="change_page_size({{ page_all_number }})">尾页</div>
                            {% else %}
                                <div class="regular" style="cursor: no-drop;">下一页</div>
                                <div class="regular" style="cursor: no-drop;">尾页</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="addForm4" class="shade" style="display: none;">
        <div id="addForm5">
            <div id="title4">
                <div style="width: 400px;height: 40px;line-height: 40px;display: inline-block;vertical-align: top;font-size: 13px;text-align: left;">
                    流程搁置
                </div>
                <div style="cursor: move;height: 40px;line-height: 40px;width: 140px;display: inline-block;vertical-align: top;">
                    <i class="iconfont icon-quchu" onclick="close_models4()" style="cursor: pointer;"></i></div>
            </div>
            <div style="display: inline-block;width: 100%;height: 165px;border-right: #E8E8E8 solid 1px;font-size: 14px;border-bottom: #CCCCCC solid 0.5px;">
                <textarea name="" id="flow-travel-tag" placeholder="请填写搁置理由" style="width: 100%;height: 160px;border: none;outline: none;"></textarea>
            </div>
            <div style="width: 100%;height: 40px;font-size: 14px;text-align: right;padding-right: 1%;">
                <button id="gezhi_button"
                        style="width: 75px;height: 30px;border: #00a0e9 solid 0.5px;border-radius: 3px;background: #00a0e9;color: white;margin-top: 6px;">
                    确认
                </button>
            </div>
        </div>
    </div>

    <div id="appave-model" class="shade1">
        <div id="examine-model" style="width: 700px;background: white;left: 50%;top: 50%;position: absolute;transform: translate(-50%, -50%);">
            <div id="appave-title" style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;font-size: 14px;cursor: move;">
                <div style="width: 40%;height: 40px;line-height: 40px;text-align: left;padding-left: 1%;letter-spacing: 2px;float: left;">
                    上传合同
                </div>
                <div style="width: 59%;height: 40px;letter-spacing: 2px;float: left;">
                    <div onclick="close_models5()" style="width: 40px;height: 40px;text-align: center;line-height: 40px;cursor: pointer;float: right;">
                        <i class="iconfont icon-quchu"></i>
                    </div>
                </div>
            </div>

            <div style="width: 100%;font-size: 14px;background: #E8E8E8;padding-top: 1%;">
                <div style="width: 98%;height: 150px;margin-left: 1%;background: white;padding-top: 1%;padding-left: 1%;border-radius: 3px;padding-right: 1%;">
                    <div style="width: 100%;height: 35px;line-height: 35px;border-bottom: #E8E8E8 solid 1px;padding-left: 1%;">
                        基本信息
                    </div>
                    <div style="width: 100%;height: 125px;padding-left: 1%;">
                        <div style="width: 100%;height: 50px;">
                            <div style="width: 49%;height: 50px;float: left;padding-left: 1%;color: #B5B5B5;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 50px;">
                                <span style="color: #9C9C9C;">合同名称：</span><span id="ContractName"></span>
                            </div>
                            <div style="width: 49%;height: 50px;float: right;padding-left: 1%;color: #B5B5B5;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 50px;">
                                <span style="color: #9C9C9C;">立项科室：</span><span id="ProjectDepartment"></span>
                            </div>
                        </div>

                        <div style="width: 100%;height: 50px;">
                            <div style="width: 49%;height: 50px;float: left;padding-left: 1%;color: #B5B5B5;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 50px;">
                                <span style="color: #9C9C9C;">经费来源：</span><span id="FundingSource"></span>
                            </div>
                            <div style="width: 49%;height: 50px;float: right;padding-left: 1%;color: #B5B5B5;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 50px;">
                                <span style="color: #9C9C9C;">合同金额：</span><span id="ContractAmount"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="width: 98%;margin-left: 1%;background: white;padding-top: 1%;padding-left: 1%;border-radius: 3px;margin-top: 1%;padding-right: 1%;padding-bottom: 20px;">
                    <div style="margin-left: 2%;width: 96%;height: 150px;">
                        <div style="width: 150px;height: 150px;display: inline-block;vertical-align: top;">
                            <a href="javascript:;" class="file" style="margin-top: 25px;">
                                <img src="../../static/personal_center/img/加号_o.png" alt="" onclick="onclick_upload_file()" style="width: 100px;height: 100px;vertical-align: baseline;">
                                <input type="file" name="regular_main_body" id="regular_main_body" onchange="upload_accessory()">
                            </a>
                        </div>

                        <div id="upload_file_list" style="width: 76%;height: 100%;display: inline-block;vertical-align: top;">

                        </div>
                    </div>
                </div>

                <div style="width: 100%;height: 40px;background: white;margin-top: 1%;text-align: right;padding-right: 2%;">
                    <button id="agree_confirm" style="letter-spacing: 3px;width: 100px;height: 30px;margin-top: 5px;border-radius: 1px;border: #00a0e9 solid 1px;text-align: center;background: #00a0e9;color: white;">同意</button>
                    <button onclick="close_models5()" style="letter-spacing: 3px;width: 100px;height: 30px;margin-top: 5px;border-radius: 1px;border: #00a0e9 solid 1px;text-align: center;background: #00a0e9;color: white;margin-left: 15px;">取消</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("process_management").className = "add-nav-active";
        };


        function choose_val(val_data) {
            document.getElementById("chooseval").innerText = val_data;
        }

        function change_mind(ele_id) {
            if (ele_id === "my_application") {
                var data_value = "我的待办";
            } else if (ele_id === "new_issues") {
                data_value = "我的已办";
            } else if (ele_id === "my_shelve") {
                data_value = "我的搁置";
            } else {
                data_value = "我的申请"
            }
            window.location.href = "/personal-center/process_management.html?type="+data_value+"&folw_type=&folw=&page=1&page_size=20&wd="
        }

        var onlick_list = document.getElementsByClassName("onclick-search");

        function change_color(datavalue) {
            for (var j = 0; j < onlick_list.length; j++) {
                if (onlick_list[j].getAttribute("data-value") === datavalue) {
                    onlick_list[j].className = "onclick-search add-backbround-color";
                } else {
                    onlick_list[j].className = "onclick-search";
                }
            }
        }

        function left_click_search(data_value) {
            change_color(data_value);
            var LeftNavigation = document.getElementsByClassName("LeftNavigation");
            for (var i=0; i<LeftNavigation.length; i++) {
                if (LeftNavigation[i].id !== data_value) {
                    LeftNavigation[i].style.display = "none";
                }
            }

            var tags = document.getElementById(data_value).style.display;
            if (tags === "none") {
                document.getElementById(data_value).style.display = "inline-block";
            } else {
                document.getElementById(data_value).style.display = "none";
            }
        }

        function change_font_color(data_value) {
            var div_list = document.getElementsByClassName("div_tag2");
            for (var j = 0; j < div_list.length; j++) {
                if (div_list[j].getAttribute("data-value") === data_value) {
                    div_list[j].style.color = "#1E90FF";
                } else {
                    div_list[j].style.color = "#0b0b0b";
                }
            }
            var type_val = document.getElementsByClassName("tab_top top_tag")[0].innerText;

            var folw_type = document.getElementsByClassName("onclick-search add-backbround-color")[0].getAttribute("data-value").trim();
            window.location.href = "/personal-center/process_management.html?type="+type_val+"&folw_type="+folw_type+"&folw="+data_value+"&page=1&page_size=20&wd="
        }

        function model_inlone(ele_id) {
            document.getElementById("new_models1").style.display = "table-row";
            document.getElementById("summit_but").setAttribute("onclick", "commit_remake('" + ele_id + "')");
        }

        let title = document.querySelector("#box");
        let addForm = document.querySelector("#new_models");

        title.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm.offsetLeft;
            let y = e.pageY - addForm.offsetTop;

            document.addEventListener("mousemove", move);

            function move(e) {
                addForm.style.left = e.pageX - x + 'px';
                addForm.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        // 提交备注
        function commit_remake(ele_id) {
            var remarks = document.getElementById("remarks").value;
            if (!remarks) {
                alert("请填写备注！")
                return false
            }
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/personal-center/Comments", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("received_id=" + String(ele_id) + "&remarks=" + remarks);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate['code'] === 200) {
                            console.log('JsonDate', JsonDate)
                            alert('添加成功！')
                            window.location.reload();
                        } else {
                            alert(JsonDate['message'])
                            window.location.reload();
                        }
                    }
                }
            }
        }

        function close_models() {
            document.getElementById("new_models1").style.display = "none";
        }

        function delete_flow(ele_id) {
            var r = confirm('是否删除该已办流程？')
            if (r) {
                document.getElementById("loading").style.display = "inline-block";
                var xhr = new XMLHttpRequest();
                var local_host = window.location.host;          // 获取当前IP
                xhr.open('post', "/system-setup/DeleteFlow", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send("id=" + ele_id)
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            console.log(JsonDate);
                            alert(JsonDate['message'])
                            window.location.reload();
                        }
                    }
                };
            }
        }

        function shelve_func(database_name, flow_id) {
            if (database_name !== '9') {
                alert("对不起！搁置功能暂时只运用于用印申请！")
                return false
            }
            var r = confirm('是否搁置该流程？')
            if (r) {
                var appave_opinion = document.getElementById("flow-travel-tag").value;
                document.getElementById("loading").style.display = "inline-block";
                var xhr = new XMLHttpRequest();
                var local_host = window.location.host;          // 获取当前IP
                xhr.open('post', "/system-setup/ShelveFlow", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send("id=" + flow_id + "&database_name=" + String(database_name) + "&appave_opinion=" + appave_opinion)
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            console.log(JsonDate);
                            alert(JsonDate['message'])
                            window.location.reload();
                        }
                    }
                };
            }
        }

        function close_models4() {
            document.getElementById("addForm4").style.display = "none";
        }

        function line_modes(database_name, flow_id) {
            document.getElementById("addForm4").style.display = "table-row";
            if (database_name === "4") {
                 document.getElementById("gezhi_button").setAttribute("onclick", "ShelveTopic('"+String(flow_id)+"')")
            }else {
                document.getElementById("gezhi_button").setAttribute("onclick", "shelve_func('" + database_name + "', " + flow_id + ")")
            }
        }

        let title4 = document.querySelector("#title4");
        let addForm5 = document.querySelector("#addForm5");
        title4.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm5.offsetLeft;
            let y = e.pageY - addForm5.offsetTop;


            document.addEventListener("mousemove", move);

            function move(e) {
                addForm5.style.left = e.pageX - x + 'px';
                addForm5.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function ChooseFlow(flow_name) {
            window.location.href = "/personal-center/process_management.html?type=我的已办&folw_type=公文管理&folw=上级来文&page=1&page_size=20&flow_name="+flow_name+"&wd=";
        }

        var box = document.querySelector('.table_wrap');

        // 记录最后滚动的距离
        var lastScrollTop = 0, lastScrollLeft = 0;
        box.classList.add('shadow-right');
        // 监听容器滚动
        box.addEventListener('scroll', function (e) {
            lastScrollLeft = e.target.scrollLeft;
            // 如果滚动到右边，移除右边阴影样式
            if (box.scrollWidth - (lastScrollLeft + box.clientWidth) <= 4 ) {
                box.classList.remove('shadow-right');
            }
            // 否则添加右边阴影样式
            else {
                box.classList.add('shadow-right');
            }

            // 阴影效果修正
            box.classList.remove('shadow-y');
            box.classList.add('shadow-x');
        });

        var tTD;      //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
        var table = document.getElementById("table");
        for (j = 0; j < table.rows[0].cells.length; j++) {
            table.rows[0].cells[j].onmousedown = function () {
               //记录单元格
                tTD = this;
                if (event.offsetX > tTD.offsetWidth - 10) {
                    tTD.mouseDown = true;
                    tTD.oldX = event.x;
                    tTD.oldWidth = tTD.offsetWidth;
                }

            };
            table.rows[0].cells[j].onmouseup = function () {
                //结束宽度调整
                if (tTD === undefined) tTD = this;
                tTD.mouseDown = false;
                tTD.style.cursor = 'default';
            };
            table.rows[0].cells[j].onmousemove = function () {
                //更改鼠标样式
                if (event.offsetX > this.offsetWidth - 10) {
                    this.style.cursor = 'col-resize';
                } else {
                    this.style.cursor = 'default';
                }

                //取出暂存的Table Cell
                if (tTD === undefined) {
                    tTD = this;
                }
                //调整宽度
                if (tTD.mouseDown != null && tTD.mouseDown === true) {
                    tTD.style.cursor = 'default';
                    if (tTD.oldWidth + (event.x - tTD.oldX) > 0) {
                        tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                    }
                    //调整列宽
                    tTD.style.width = String(tTD.width) + "px";
                    tTD.style.cursor = 'col-resize';
                    //调整该列中的每个Cell
                    table = tTD;
                    while (table.tagName !== 'TABLE') {
                        table = table.parentElement;
                    }
                    for (j = 0; j < table.rows.length; j++) {
                        table.rows[j].cells[tTD.cellIndex].width = tTD.width;
                    }
                 }
            }
        }

        function change_page_size(page_number=1) {
            var page_size = document.getElementById('page-size').value;
            const url = new URL(window.location.href);
            // 创建URLSearchParams对象
            const params = new URLSearchParams(url.search);
            // 设置某个参数的值
            params.set('page', page_number);
            params.set('page_size', page_size);
            url.search = params.toString();
            window.location.href = url.href;
        }

        function search_key() {
            var search_val = document.getElementById("search_val").value.trim();
            const url = new URL(window.location.href);
            // 创建URLSearchParams对象
            const params = new URLSearchParams(url.search);
            // 设置某个参数的值
            params.set('wd', search_val);
            url.search = params.toString();
            window.location.href = url.href;
        }

        function ShelveTopic(flow_id) {
            var remarks = document.getElementById("flow-travel-tag").value;
            if (!remarks) {
                alert("请填写搁置理由！");
                return false
            }
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/personal-center/IssueRemarks", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("iss_id="+String(flow_id)+"&shelve=1&halfway=1"+"&remarks="+remarks);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    alert("操作成功！");
                    document.getElementById("loading").style.display = "none";
                    location.reload();
                }
             };
        }

        function reduction_modes(flow_id) {
            if (confirm("是否还原该议题！")) {
                var xhr = new XMLHttpRequest();
                xhr.open('post', "/personal-center/RestoringIssues", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send("flow_id="+String(flow_id));
                xhr.onload = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var JsonDate = JSON.parse(xhr.responseText);
                            if (JsonDate["code"] === 200) {
                                alert("还原成功！");
                                location.reload();
                            } else {
                                alert(JsonDate["message"]);
                            }
                        }
                    }
                 };
            }
        }

        function reduction_func(ele_id) {
            var r = confirm('是否还原该流程？')
            if (r) {
                var xhr = new XMLHttpRequest();
                xhr.open('post', "/system-setup/reduction", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send("id=" + String(ele_id));
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            document.getElementById("loading").style.display = "none";
                            var JsonDate = JSON.parse(xhr.responseText);
                            if (JsonDate["code"] === 200) {
                                alert("还原成功！");
                                location.reload();
                            }else {
                                alert(JsonDate["message"]);
                            }
                        }
                    }
                };
            }
        }

        function online_tag(flow_type, contract_name, ProjectDep, source, contract_money, fj_number) {
            document.getElementById("ContractName").innerText = contract_name;
            document.getElementById("ProjectDepartment").innerText = ProjectDep;
            document.getElementById("FundingSource").innerText = source;
            document.getElementById("ContractAmount").innerText = contract_money;
            document.getElementById("agree_confirm").setAttribute('onclick', "upload_contract('"+fj_number+"', '"+flow_type+"')")
            document.getElementById("appave-model").style.display = "table-row";
        }

        function close_models5() {
            document.getElementById("appave-model").style.display = "none";
        }

        let appave_title = document.querySelector("#appave-title");
        let examine_model = document.querySelector("#examine-model");

        appave_title.addEventListener("mousedown", function (e) {
            let x = e.pageX - examine_model.offsetLeft;
            let y = e.pageY - examine_model.offsetTop;
            document.addEventListener("mousemove", move);

            function move(e) {
                examine_model.style.left = e.pageX - x + 'px';
                examine_model.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function onclick_upload_file() {
            document.getElementById("regular_main_body").click();
        }

        function upload_accessory() {
            var files = document.getElementById("regular_main_body").files[0];
            creat_table(files.name)
        }

        function creat_table(file_name) {
            var html_str = `
                <div style="width: 100%;height: 40px;line-height: 40px;">
                    <div style="width: 79%;height: 100%;display: inline-block;vertical-align: top;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                        <a target='_blank' href="javascript:;">`+file_name+`</a>
                    </div>
                    <div onclick="RemoveTr(this)" style="width: 18%;height: 100%;display: inline-block;vertical-align: top;text-align: center;font-size: 12px;cursor: pointer;color: red;">
                        删除
                    </div>
                </div>
            `
            $("#upload_file_list").append(html_str)
        }

        function RemoveTr(_this) {
            var parentNode = _this.parentNode;
            parentNode.remove()
        }

        function upload_contract(fj_number, flow_type) {
            document.getElementById("loading").style.display = "inline-block";
            var form = new FormData();
            var files = document.getElementById('regular_main_body').files[0];
            form.append('file1', files);
            form.append('number', fj_number);
            form.append('source', flow_type);
            form.append('contract', "True");

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/administrative/topics_attachments_upload", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate);
                        if (JsonDate["code"] === 200) {
                            alert("上传成功！")
                            close_models5();
                            window.location.reload();
                        }else {
                            alert("上传失败，请联系管理员！")
                        }
                    }
                }
            };
        }
    </script>
{% endblock %}
